<template>
    <view>
        <view class="bg">
            
            <block v-if="list.length > 0">
                <view class="item row" v-for="(item) in list" :key="item.ID" @click="nav_to('/pages/court/golfScore?id='+item.ID)">
                <view class="colcon">
                    <view class="type">
                        <view>{{item.ShopName?item.ShopName: ''}}</view>
                        <view :class="{'state':item.Status == 0, 'finish': item.Status == 2, 'state': item.Status == 1}">{{getstatu(item)}}</view>    
                    </view>
                    <view class="col6">
                        <view v-if="item.Status != 2" class="score">
                            <text class="sumscore">总杆：</text>
                            <text>
                                {{'待统计'}}
                            </text>
                            </view>
                        <view v-else class="score">
                            <text class="sumscore">总杆：</text>
                            <text>{{item.Score}}</text>
                        </view>
                        <view v-if="item.Status == 2" class="cotime">{{'耗时：'+intervalTime(item)}}</view>
                    </view>
                    <view class="time">{{getTime(item.StartTime)}}</view>
                </view>
                </view>
            </block>
            <block v-else>
                <u-empty mode="list" width="100" height="100" icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
						:show="true" iconSize="32" text="暂无数据"></u-empty>
            </block>
        </view>
        <view class="bottombox">
            <view class="btnbox">
                <view @click="nav_to('/pages/court/golfScore')" class="fullBtn blackBtn">
                    添加记分
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    index:1,
    size:15,
    list:[],
    starth:0,
    endh:0,
    startmin:0,
    endmin:0,
    islist:true,
};
},
onLoad(){
    this.getRoundList()
},
onShow(){
    // this.getRoundList()
},
onReachBottom(){
    if(this.islist){
        this.index++
        this.getRoundList()
    }
    
},
onPullDownRefresh(){
    this.index = 1
    this.getRoundList()
    uni.stopPullDownRefresh();
},
methods: {
    //计算两个时间之间的时间差 多少天时分秒
    intervalTime(item) {
        let starttime = new Date(item.StartTime)
        let endtime = new Date(item.FinishTime)
        let date1 = starttime.getTime() /1000 
        var date2 = endtime.getTime() /1000 ; //结束时间
        // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
        var date3 =  (date2- date1)*1000; //时间差的毫秒数
        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000));
        //计算出小时数
        var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000));
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000));
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);
        // console.log(days + "天 " + hours + "小时 ")
        // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
        // return   days + "天 " + hours + "小时 "
        return hours + "小时 " + minutes + " 分钟"
},
    getstatu(item){
        if(item.Status == 0){
            return '未开始'
        }else if(item.Status == 1){
            return '进行中'
        }else{
            return '已结束'
        }
    },
    async getRoundList(){
        let res = await this.$api.post('GolfHole/MyRoundList',{
            PageIndex:this.index,
            PageSize:this.size
        })
        if(res.code == 0){
            if(res.data){
                this.list = this.index == 1? res.data:this.list.concat(res.data) 
            }else{
                this.islist = false
            }
            
        }
    },
},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.state {
            font-size: 28rpx;
            font-weight: 500;
            color: #2BA139;
        }
.finish {
            text-align: right;
            color: #999999 !important;
            font-size: 28rpx;
        }
.bg{
    width: 702rpx;
    // background: #fff;
    // border-radius: 16rpx;
    margin: 0 auto;
}
.item{
    // height: 140rpx;
    align-items: center;
    border-radius: 16rpx;
    margin: 15rpx 0;
    background-color: #fff;
    padding: 20rpx 16rpx;
}
.row {
    margin-top: 20rpx;
    display: flex;
    min-height: 50rpx;
    flex-wrap: wrap;
}

.colcon {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20rpx;
    .time {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #999999;
    }
    .type {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
      display: flex;
    justify-content: space-between;
    align-items: center;
    }
  }
  .col6 {
    text-align: right;
    padding-right: 20rpx;
    box-sizing: border-box;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    align-items: center;
    .score{
        font-size: 36rpx;
        .sumscore{
            font-weight: 500;
            font-size: 30rpx;
        }
    }
    .cotime{
        font-size: 28rpx;
        font-weight: 500;
        color: #999999;
    }
  }
.title2{
    color: #999999;
    font-size: 26rpx;
    margin-top: 10rpx;
}
.bottombox {
	width: 100%;
	height: 205rpx;
	position: relative;
}
.btnbox {
	width: 100%;
	// min-height: 132rpx;
	height: 205rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ffffff;
	padding: 25rpx;
	box-shadow: 0 0 4rpx #ccc;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	z-index: 100;
}
.blackBtn {
    
	background: #706EEE;
	color: #ffffff;
}
.fullBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: blod;
		width: 100%;
		height: 92rpx;
		margin: 20rpx auto;
		border-radius: 50rpx;
		margin-right: 15rpx;
	}
</style>